<template>
  <div class="stuList">
    <!-- 学生列表 -->
    <div class="search">
      <!-- <div class="box1">
        <el-date-picker
          class="blockPicker"
          v-model="page.startTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="开始入学时间"
        >
        </el-date-picker>
      </div>
      <div class="box1">
        <el-date-picker
          class="blockPicker"
          v-model="page.endTime"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="结束入学时间"
        >
        </el-date-picker>
      </div> -->

      <div class="box1">
        <el-select
          v-model="page.scoreId"
          clearable
          placeholder="请选择评分表"
          @change="searchBtn"
        >
          <el-option
            v-for="item in selectScoreList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="box1">
        <el-select
          v-model="page.departmentId"
          clearable
          placeholder="请选择组织机构"
          @change="searchBtn"
        >
          <el-option
            v-for="item in organizationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="box2">
        <el-input
          v-model="page.studentId"
          placeholder="搜索学号"
          @change="searchBtn"
          clearable
        ></el-input>
      </div>
      <!-- <div class="box2">
        <el-input v-model="page.classs" placeholder="搜索班级"
          @change="searchBtn"></el-input>
      </div>
      <div class="box2">
        <el-input v-model="page.major" placeholder="搜索专业"
          @change="searchBtn"></el-input>
      </div> -->
      <div class="box2">
        <el-input
          v-model="page.userName"
          placeholder="搜索姓名"
          @change="searchBtn"
          clearable
        ></el-input>
      </div>
      <div class="box2">
        <el-input
          v-model="page.telephone"
          placeholder="搜索手机号"
          @change="searchBtn"
          clearable
        ></el-input>
      </div>
      <button @click="searchBtn">查询</button>
    </div>
    <div class="table">
      <div style="text-align: center" class="pagbox">
        <el-table
          :data="studentList"
          :header-cell-style="{
            textAlign: 'center',
            color: '#333',
            fontWeight: '400',
            fontSize: '14px',
            height: '62px',
          }"
          :cell-style="{ textAlign: 'center', padding: '5px' }"
          style="width: 98%; margin: 0 auto"
        >
          <el-table-column width="70">
            <template slot-scope="picture">
              <img class="avatar" v-if="picture.row.userUrl" :src="picture.row.userUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="userName"
            width="100"
          ></el-table-column>
          <el-table-column label="性别" width="60">
            <template slot-scope="sex">
              <div v-if="sex.row.sex === 1">
                <img src="@/assets/male.png" />
                <span>男</span>
              </div>
              <div v-else>
                <img src="@/assets/formale.png" />
                <span>女</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="年龄" prop="age" width="60">
          </el-table-column>
          <el-table-column label="出生年月" prop="birthday"> </el-table-column>
          <el-table-column label="学号" prop="studentId"> </el-table-column>
          <el-table-column label="评分表">
            <template slot-scope="scope">
              <div v-if="scope.row.score.length !== 0">
                <p v-for="(item, index) in scope.row.score" :key="index">
                  {{ item.scoreName }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="组织机构" prop="dpname" width="150">
          </el-table-column>
          <el-table-column label="手机号" prop="telephone1" width="105">
          </el-table-column>
          <el-table-column label="入学时间" prop="enrollmentDate" width="100">
          </el-table-column>
          <el-table-column label="生源地" prop="sourceAddr"> </el-table-column>
          <el-table-column label="生源地属性" prop="sourceAttr">
          </el-table-column>
          <el-table-column label="学校" prop="school" width="140">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagebox">
      <el-pagination
        v-model="page"
        background
        layout="prev, pager, next"
        :total="totalcount"
        :page-size="page.pageSize"
        :current-page="page.page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getSelectScore, getSelectAllDepart, getSelectScoreUser} from '@/api/repcard/repcard.js';
export default {
  name: 'repList',
  data() {
    return {
      entryNames: '', // 年级
      totalcount: 0, // 数据总条数
      selectScoreList: [], // 评分表数据
      organizationList: [], // 组织机构数据
      page: { // 搜索数据
        page: 1,
        pageSize: 8,
        userType: parseInt(sessionStorage.getItem('usertype')), // 当前登录人属性
        studentId: null, // 学号
        classs: null, // 班级
        departmentId: null, // 组织机构id
        major: null, // 专业
        scoreId: null, // 评分表id
        userName: null, // 名字
        telephone: null, // 电话号码
        departmentIdList: JSON.parse(sessionStorage.getItem('departmentIdList')) // 部门id列表
      },
      studentList: [] // 学生列表数据

    };
  },
  created() {
    this.getSelectScore();
    this.getSelectScoreUser();
  },
  methods: {
    // 获取评分表、组织机构
    async getSelectScore() {
      const {data} = await getSelectScore({userId: parseInt(sessionStorage.getItem('userid')), userType: parseInt(sessionStorage.getItem('usertype'))});
      // console.log(data);
      this.selectScoreList = data;
      for (let i = 0; i < this.selectScoreList.length; i++) {
        if (this.selectScoreList[i] === null) {
          this.selectScoreList.splice(i, 1);
          i--;
        }
      }
      const { data: data1 } = await getSelectAllDepart();
      // console.log(data1);
      this.organizationList = data1;
    },
    // 获取学生列表
    async getSelectScoreUser() {
      // console.log(this.page);
      const res = await getSelectScoreUser(this.page);
      // console.log(res);
      this.totalcount = res.totalcount;
      this.studentList = res.data;
    },
    // 翻页
    handleCurrentChange(currentPage) {
      this.page.page = currentPage;
      this.getSelectScoreUser();
    },
    // 搜索按钮
    searchBtn() {
      this.page.page = 1;
      this.getSelectScoreUser();
    }
  }
};
</script>

<style lang="less" scoped>
.stuList {
  padding: 0 20px;
  padding-bottom: 0;
  .search {
    // width: 1500px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    // justify-content: space-between;
    .box1 {
      position: relative;
      width: 185px;
      font-size: 12px;
      margin-right: 20px;
    }
    .box2 {
      width: 185px;
      height: 32px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #f1f4ff;
      margin-right: 20px;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
    }
  }
  .table {
    // height: 65vh;
    background: #ffffff;
    box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    overflow-y: auto;
    /deep/ td {
      padding: 0 !important;
      img {
        width: 15px;
        height: 15px;
        position: relative;
        top: 2px;
      }
      p {
        margin: 8px 0;
      }
      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        box-shadow: 0 0 3px #888;
      }
      .czBox {
        cursor: pointer;
        width: 28px;
        height: 28px;
      }
    }
  }
  .pagebox {
    width: 100vw;
    display: flex;
    justify-content: center;
    .el-pagination {
      padding-bottom: 20px;
      /deep/.btn-prev {
        width: 32px;
        height: 32px;
        background-color: #faf9ff;
      }
      /deep/.btn-next {
        width: 32px;
        height: 32px;
        background-color: #faf9ff;
      }
    }
  }
  /deep/.el-input {
    width: 100% !important;
  }

  /deep/.el-icon-arrow-left:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-icon-arrow-right:before {
    font-size: 20px;
    color: #555555;
  }
  /deep/.el-pager li {
    width: 32px;
    height: 32px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    line-height: 32px;
    border-radius: 50% !important;
    background-color: #faf9ff !important;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
    color: #ffffff !important;
    box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
  }
}
</style>
